<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <div class="block-box items-start">
                <div class="big-font-size three-color">供应商信息</div>
                <ul class="create-box">
                    <li>
                        <div class="big-font-size second-color">供应商名称</div>
                        <input type="text" v-model="supplier_name"/>
                    </li>
                    <li>
                        <div class="big-font-size second-color">联系人姓名</div>
                        <input type="text" v-model="contact_name"/>
                    </li>
                    <li>
                        <div class="big-font-size second-color">联系人电话</div>
                        <input type="text" v-model="contact_phone"/>
                    </li>
                    <li>
                        <div class="big-font-size second-color">所在地区</div>
                        <div class="address-box">
                            <select v-model="province_id" @change="getAddressSelected()">
                                <option :value="item.id" v-for="item in provinceList" >{{item.name}}</option>
                            </select>
                            <select v-model="city_id" @change="getAddressSelected(province_id)">
                                <option :value="item.id" v-for="item in provinceList" >{{item.name}}</option>
                            </select>
                            <select v-model="area_id" @change="getAddressSelected(city_id)">
                                <option :value="item.id" v-for="item in provinceList" >{{item.name}}</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <div class="big-font-size second-color">详细地址</div>
                        <input type="text" v-model="address"/>
                    </li>
                    <li>
                        <div class="big-font-size second-color">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</div>
                        <input type="text" v-model="note"/>
                    </li>
                </ul>
            </div>
            <div class="button-box">
                <mt-button class="width120 middle-font-size" @click="cancelFun">取消</mt-button>
                <mt-button class="width120 middle-font-size background white-color" @click="submitFun">提交
                </mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {Picker} from 'mint-ui';

    export default {
        name: "SupplierCreate",
        data() {
            return {
                GetWindowBackground: {
                    'min-height': ''
                },
                province_id:1,
                city_id:2,
                area_id:1,
                provinceList:[{
                    id:1,
                    name:'天津',
                },{
                    id:2,
                    name:'北京',
                }],
                supplier_name:'',
                contact_name:'',
                contact_phone:'',
                address:'',
                note:''
            }
        },
        mounted() {

        },
        methods: {
            //地址选择
            getAddressSelected(addressId){
                if(addressId){
                    console.log(addressId)
                }else{
                    console.log('没有传参数')
                }
            },
            //跳转供应商列表
            submitFun() {
                var data={
                    supplier_name:this.supplier_name,
                    contact_name:this.contact_name,
                    contact_phone:this.contact_phone,
                    address:this.address,
                    note:this.note,
                    area_id:this.area_id
                }
                console.log(data)
                this.$router.push('/SupplierList')
            },
            cancelFun() {
                this.$router.push('/SupplierList')
            },
            getHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        }
        ,
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getHeight) // 注册监听器
            this.getHeight() // 页面创建时先调用一次
        }
        ,
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getHeight)
        }
        ,
    }
</script>

<style lang="scss" scoped>

    .padding-top10 {
        padding-top: 15px;
    }

    .block-box {
        width: calc(100% - 80px);
        padding: 25px;
    }

    .create-box {
        width: 100%;
        padding-bottom: 20px;
        margin-top: 5px;
        li {
            width: 100%;
            height: 45px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            div {
                margin-bottom: 7px;
            }
            input {
                width: calc(100% - 100px);
                height: 30px;
                border-top: 0;
                border-left: 0;
                border-right: 0;
                border-bottom: 1px solid #ebedf1;
                outline: none;
                list-style: none;
            }
        }
    }

    .button-box {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 45px;
        .width120 {
            width: 120px;
            border: 1px solid #05c569;
            color: #05c569;
            border-radius: 10px;
        }
    }
    .disabledInput{
        letter-spacing: 5px;
    }
    .address-box{
        width: calc(100% - 100px);
        height: 30px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #ebedf1;
        select{
            width: 33%;
            border: 0px;
            text-align: center;
        }

    }
</style>